import React, { useEffect, useState } from "react";
import styles from "./Index.module.css";
import { Avatar } from "antd-mobile";
import instance from "../../api/request";
import { Tabs } from "antd-mobile";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
// import Myfooter from '../../components/Myffoter/Index'
function Index() {
  const nav=useNavigate()
  const [tab, setTab] = useState([]);
  const [departmentId, setDepartmentId] = useState(2);
  const [page, setPage] = useState(1);
  const [count, setCount] = useState(5);
  const [list, setList] = useState([]);

  const gettab = () => {
    instance.get("/api/share/knowledgeBase/v1/findDepartment").then((res) => {
      console.log(res);
      setTab(res.data.result);
    });
  };

  const gettabl = () => {
    instance
      .get("/api/user/sickCircle/v1/findSickCircleList", {
        params: {
          departmentId: departmentId,
          page: page,
          count: count,
        },
      })
      .then((res) => {
        console.log(res);
        setList(res.data.result);
      });
  };

  useEffect(() => {
    gettab();
  }, []);
  useEffect(() => {
    gettabl();
  }, [departmentId, page, count]);

  return (
    <div className={styles.bingq}>
      <div className={styles.heard}>

        <div className={styles.wen}  onClick={()=>nav('/person')} >
          <Avatar src="" style={{ "--border-radius": "50%" }}/>
        </div>


        <div className={styles.tou}>
          <img src="./heil.png" alt="" />
        </div>
      </div>

      <div className={styles.tab}>
        <Tabs onChange={(key) => setDepartmentId(Number(key))}>
          {tab.map((item) => {
            return (
              <Tabs.Tab key={item.id} title={item.departmentName}>
               
              </Tabs.Tab>
            );
          })}
        
        </Tabs>
        <div className={styles.searchIcon} onClick={()=>nav('/bingsearch')}>
          <img src="./s.jpg" alt="搜索" />
        </div>
      </div>

      <div className={styles.listz}>
        {list.map((item, index) => {
          return (
            <div key={index} className={styles.list} onClick={()=>nav(`/bingydetail/${item.sickCircleId}`)}>
              <h2 className={styles.title}>{item.title}</h2>
              {/* <span>{item.amount}</span> */}
              <p className={styles.time}>{dayjs(item.createTime).format("YYYY-MM-DD")}</p>
              <p className={styles.detail}>{item.detail}</p>
              <div className={styles.shou}>
                 <span className={styles.collection}>收藏{item.collectionNum}</span>{" "}
              <span className={styles.comment}>建议{item.commentNum}</span>
              </div>
             
            </div>
          );
        })}
      </div>



    </div>
  );
}

export default Index;
